<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全员工薪资管理</title>
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all">
<!-- 网页引入echart -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="../public/layui/layui.js" charset="utf-8"></script>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		<legend><h2>已发放的薪资统计</h2></legend>
	</fieldset>
	<div id="main" style="width: 1300px;height:540px;"></div>
<script type="text/javascript">
layui.use(['jquery','layer'],function(){
	var $ = layui.jquery;
	var layer = layui.layer;
	var deptlist,totallist,meritlist,punishlist;
	$.ajax({
		 url:"../HumanServlet?button=10"
		 ,type:"post"
		 ,async:false
		 ,data: {}
		 ,dataType: "json"
		 ,success:function(res){
// 			 console.log(res);
			 deptlist = res.deptlist;
			 totallist = res.totallist;
			 meritlist = res.meritlist;
			 punishlist = res.punishlist;
		 }
	});
// 	console.log(deptlist);
	var app = {};

	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;
	
	app.config = {
	    rotate: 90,
	    align: 'left',
	    verticalAlign: 'middle',
	    position: 'top',
	    distance: 0,
	    onChange: function () {
	        var labelOption = {
	            normal: {
	                rotate: app.config.rotate,
	                align: app.config.align,
	                verticalAlign: app.config.verticalAlign,
	                position: app.config.position,
	                distance: app.config.distance
	            }
	        };
	        myChart.setOption({
	            series: [{
	                label: labelOption
	            }, {
	                label: labelOption
	            }, {
	                label: labelOption
	            }, {
	                label: labelOption
	            }]
	        });
	    }
	};


	var labelOption = {
	    show: true,
	    position: app.config.position,
	    distance: app.config.distance,
	    align: app.config.align,
	    verticalAlign: app.config.verticalAlign,
	    rotate: app.config.rotate,
	    formatter: '{c}  {name|{a}}',
	    fontSize: 16,
	    width:3000,
	    rich: {
	        name: {
	        }
	    }
	};

	option = {
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'shadow'
	        }
	    },
	    legend: {
	        data: ['总薪资', '福利薪资', '罚扣薪资']
	    },
	    toolbox: {
	        show: true,
	        orient: 'vertical',
	        left: 'right',
	        top: 'center',
	        feature: {
	            mark: {show: true},
	            dataView: {show: true, readOnly: false},
	            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
	            restore: {show: true},
	            saveAsImage: {show: true}
	        }
	    },
	    xAxis: [
	        {
	            type: 'category',
	            axisTick: {show: false},
	            data: deptlist
	        }
	    ],
	    yAxis: [
	        {
	            type: 'value'
	        }
	    ],
	    series: [
	        {
	            name: '总薪资',
	            type: 'bar',
	            barGap: 0,
	            label: labelOption,
	            emphasis: {
	                focus: 'series'
	            },
	            data: totallist
	        },
	        {
	            name: '福利薪资',
	            type: 'bar',
	            label: labelOption,
	            emphasis: {
	                focus: 'series'
	            },
	            data: meritlist
	        },
	        {
	            name: '罚扣薪资',
	            type: 'bar',
	            label: labelOption,
	            emphasis: {
	                focus: 'series'
	            },
	            data: punishlist
	        }
	    ]
	};

	option && myChart.setOption(option);
});
</script>
</body>
</html>